<template>

  <el-container style="min-height: 100vh; max-height: 100vh">
    <!-- 侧边栏    父向子组件传参-->
    <el-aside :width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246); box-shadow: 2px 0 6px rgb(0 21 41 / 35%);">
      <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow"  />
    </el-aside>
    <!--主体-->
    <el-container>
      <!--主体-头部-弹性布局-->
      <el-header style="background-color: skyblue;font-weight:bold;font-size: 18px; border-bottom: 1px solid #ccc; line-height: 60px">
        <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse" :user="user"/>
      </el-header>

      <!--主体-内容-->
     <el-main style="background-color: #c9ddeb">
       <!--二级路由-->
       <router-view  @refreshUser="refreshUser"/>
      </el-main>

    </el-container>

  </el-container>
</template>

<script>




  import Aside from "../components/Aside";
  import Header from "../components/Header";

  export default {
    name: 'Home',
    components: {
      Aside,
      Header
    },
    created() {
      this.refreshUser();
    },

    data() {
      // const item = {
      //   date: '2016-05-02',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1518 弄'
      // };
      return {

        //收缩按钮图标
        collapseBtnClass: 'el-icon-s-fold',
        //侧边栏关闭打开
        isCollapse: false,
        sideWidth: 200,
        //侧边文本显示隐藏
        logoTextShow: true,

        user: {},

      }
    },

    methods: {
      /**
       *  点击收缩按钮触发
       */
      collapse() {
        this.isCollapse = !this.isCollapse
        if (this.isCollapse) {  // 收缩
          this.sideWidth = 50 //宽度
          this.collapseBtnClass = 'el-icon-s-unfold' //样式
          this.logoTextShow = false //侧边能栏标题显示隐藏
        } else {   // 展开
          this.sideWidth = 200
          this.collapseBtnClass = 'el-icon-s-fold'
          this.logoTextShow = true
        }
      },

      refreshUser() {
        this.user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
      }

    }
  }
</script>
<style>

</style>
